<template>
	<view class="contanier">
		<view class="tip">小提示：获奖感言被精选到晒单广场后，将获得红包奖励哦~</view>

		<view class="content">
			<textarea @blur="blurarea" class="area" maxlength="20" placeholder="收到奖品了吗？分享一下你的奖品和获奖感言吧！（20字）"></textarea>
			<uploadimgs :imgnum="imgnum" :imglist="formdata.thumb" ref="uploadimgs"></uploadimgs>
		</view>

		<view class="score">
			<text>你对收到的奖品满意吗？</text>
			<view class="imagarr">
				<image v-for="(item,index) in intstarts" :key="index" :src="item" @click="seletedstart(index)"></image>
			</view>
		</view>
		<view class="tousu" @click="gotoproposal">
			<text>我要投诉 ›</text>
		</view>

		<view class="bottomitem">
			<view class="buttons" @click="submitsheet">
				完成晒单领红包
			</view>
		</view>
	</view>

</template>

<script>
	/**
	 * 晒单
	 */
	export default {
		data() {
			return {
				intstarts: [
					'/static/image/greystarts.png',
					'/static/image/greystarts.png',
					'/static/image/greystarts.png',
					'/static/image/greystarts.png',
					'/static/image/greystarts.png',
				],
				imgnum: 4,

				formdata: {
					lottery_id: 0, //奖品id
					fraction: 0, //星级
					content: '', //内容
					thumb: [],

				}
			}
		},
		onLoad(option) {
			uni.$on('getimageArr', (imgdata) => {
				this.formdata.thumb = imgdata;
			})
			this.formdata.lottery_id = option.id;
		},
		methods: {
			//去投诉
			gotoproposal() {
				uni.navigateTo({
					url: '/pages/proposal/proposal'
				})
			},
			blurarea(e) {
				this.formdata.content = e.detail.value;
				//console.log(e.detail.value);
			},
			seletedstart(index) {
				let startcount = index + 1;
				let queuearr = []
				for (var i = 0; i < startcount; i++) {
					//console.log(i);
					this.$set(this.intstarts, i, '/static/image/starts.png')
					queuearr = queuearr.concat(i)
				}
				//其他没有选中的更新回默认图
				this.intstarts.forEach((item, index) => {
					if (queuearr.indexOf(index) == -1) {
						this.$set(this.intstarts, index, '/static/image/greystarts.png')
					}
				});
				this.formdata.fraction = startcount;
			},
			//提交表单
			submitsheet() {
				let data = this.formdata;
				if (!data.content) {
					this.$ShowMsg('请简单描述一下你的获奖感言吧！')
					return;
				}else if(data.content.length<=15){
					this.$ShowMsg('评论的字数不得少于15字');
					return;
				}
				
				if (data.thumb.length == 0) {
					this.$ShowMsg('请至少上传一张晒得图片！')
					return;
				}

				if (data.fraction == 0) {
					this.$ShowMsg('请评分！')
					return;
				}
				console.log(data)
				this.$HttRequest({
					url: '/lottery/mascot',
					param: data,
				}, 'POST', true).then((res) => {
					if (res.status === 10000) {
						console.log(res);
						this.$common.state.evaluate = false;
						this.$ShowMsg('评价成功！');
						uni.navigateBack({
							delta: 1
						})
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.tip {
		color: #808080;
		font-size: 28rpx;
		margin: 40rpx auto;
		padding-left: 20rpx;
	}

	.bottomitem {
		display: flex;
		justify-content: space-around;
		z-index: 9999;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		font-size: 30rpx;
		border-top: 1rpx solid #e6e6e6;
		background-color: #fff;

		.buttons {
			background-color: $uni-color-primary;
			color: #fff;
			height: 88rpx;
			border-radius: 40rpx;
			width: 80%;
			margin: 30rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}

	}

	.contanier {

		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.content {
		flex: 1;
		padding: 20rpx;
		background-color: #fff;

		.area {
			height: 280rpx;
			margin-bottom: 30rpx;
			width: 100%;
		}
	}

	.score {
		font-weight: bold;
		flex: 1;

		background-color: #fff;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0;
		padding: 50rpx 0;

		text {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 45rpx;
			color: #333;
		}

		.imagarr {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			margin-top: 40rpx;
			width: 500rpx;

			image {

				width: 75rpx;
				height: 75rpx;
			}
		}
	}

	.tousu {
		text-align: center;
		font-size: 27rpx;
		color: #a5a5a5;

	}
</style>
